<!--考察小组-->

<template>
  <div>
    <a-card :bordered="false" style="over-flow:scroll">
      <div>
        <a-row>
          <div class="table-operator">
            <a-row>
              <a-col :md="24" :sm="24">
                <a-button v-if="type!='view' || type!='approve'"  type="primary"  @click="goAdd()">新增小组成员</a-button>
                <a-button  v-if="type!='view' || type!='approve'"  type="info"  @click="goDel()">删除</a-button>
              </a-col>
            </a-row>
          </div>
          
          <a-table
                  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                  :columns="columns" bordered
                  :data-source="groupList">
            
            <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
            <template slot="type" slot-scope="text,record">
              <span v-if="record.type=='1'">组长</span>
              <span v-if="record.type=='2'">成员</span>
            </template>
            
            <span slot="action" slot-scope="text, record">
                  <template>
                  <a  v-if="type!='view' || type!='approve'"  @click="handleEdit(record)">编辑</a>
                  </template>
                </span>
          </a-table>
        </a-row>
      </div>
    </a-card>
    <a-modal width="1000px" v-model="visible" :title="title" >
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          取消
        </a-button>
        <a-button :disabled="type=='view'"  key="submit" type="primary" :loading="loading" @click="handleOk">
          确定新增
        </a-button>
      </template>
      <a-form :model="form">
        <a-row>
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="考察人员"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
                
              <a-select :disabled="type=='view'"   v-model="form.employee" label-in-value @change="changeMember(form.employee)">
                <a-select-option  v-for="item in groupLists" :key="item.name">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="职位"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
              <BaseInput v-model="form.post" disabled  placeholder="请输入" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="12" :sm="12">
            <a-form-item
                    label="类别"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
              <!-- <BaseInput v-model="form.type"  placeholder="请输入" /> -->
              <a-select :disabled="type=='view'"  v-model="form.type" >
                <a-select-option value="1">组长</a-select-option>
                <a-select-option value="2">成员</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
  import { STable } from '@/components'
  import {getOrgUsers ,getUsersDetail} from '@/api/commons';
  import { getGroup ,addGroup ,editGroup, deleteGroup , getInvestigateMember} from '@/api/subcontractors/subcontractors'
  import { getStaffAll } from '@/api/subassembly/TreeSelectOrganization';
import { generateValueMaps } from 'ant-design-vue/es/table/util';

  const columns = [
    {
      title: '序号',
      width:65,
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '姓名',
      dataIndex: 'name'
    },
    {
      title: '职位',
      dataIndex: 'post',

    },
    {
      title: '类别',
      dataIndex: 'type',
      scopedSlots: { customRender: 'type' }

    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: { customRender: 'action' }
    }
  ]
  export default {
  name:'a'+Date.now(),
    data(){
      this.columns = columns
      return{
        visible:false,
        subcontractorId:1,
        title:'',
        loading:false,
        form:{
          name:'',
          type:'',
          post:'',
        },
        groupList:[],
        userId:'',
        groupLists:[],
        selectedRowKeys:[],
        selectedRows:[],
        selectId:[],
        disabled:false,
        type:''
      }
    },
    created() {
      this.userId = JSON.parse(sessionStorage.getItem('ycloud-user_info')).id
      this.id = this.$route.query.id
      this.type = this.$route.query.type
      this.getGroup()
    },
    methods:{
      getOrgUsers(){
        getOrgUsers().then(res=>{
          this.groupLists = res.data
        })
      },
      onSelectChange(selectedRowKeys,selectedRows) {
        this.selectedRowKeys = selectedRowKeys;
        this.selectedRows = selectedRows
      },
      getList(value,label){
        console.log(value)
        console.log(label)
      },
      getGroup(){
        getGroup({id:this.id}).then((res)=>{
          this.groupList=res.data
        })
      },
      changeMember(value){
        console.log(value)
        getUsersDetail({userId:value.key}).then(res=>{})
      },
      staffSelectedValue(val){
        console.log(val)
      },
      search(){
        this.$refs.table.refresh(true)
      },
      goDel(){
        let _this = this
        if(_this.selectedRows.length==1){

          this.$confirm({
            title: '警告提醒！',
            content: '确定删除？',
            okType: 'danger',
            onOk() {
              deleteGroup({ids:_this.selectedRows[0].id,subcontractorId:_this.id}).then((res)=>{
                if(res.code=='200'){
                  _this.getGroup()
                  this.$message.success("删除成功")
                }
              })
            },
            onCancel() {
              console.log('Cancel');
            }
          })
        }else if(_this.selectedRows.length>1){
          _this.selectId=[]
          _this.selectedRows.forEach((item)=>{
            _this.selectId.push(item.id)
          })
          this.$confirm({
            title: '警告提醒！',
            content: '确定删除？',
            okType: 'danger',
            onOk() {
              deleteGroup({ids:_this.selectId.join(","),subcontractorId:_this.id}).then((res)=>{
                if(res.code=='200'){
                  _this.getGroup()
                  this.$message.success("删除成功")
                }
              })
            },
            onCancel() {
              console.log('Cancel');
            },
          });
        }
      },
      handleEdit(record){
        this.visible = true
        this.title='编辑考察小组成员'
        this.form = record
        this.form.employee={
          label:record.employeeId,
          key:record.name
        }
        console.log(this.form)
        this.getOrgUsers()
      },
      goAdd(){
        this.form={}
        this.visible=true
        this.title='新增考察小组成员'
        this.getOrgUsers()
      },
      handleOk(){
        this.visible = false
        this.form.subcontractorId = this.id
        // 验证是否有组长
        let checkData = []
        // this.groupList.forEach(item=>{
         checkData = this.groupList.filter(items=>items.type=='1')
        // })
        console.log(checkData)
        if(checkData.length>=1){
          if(this.form.type=='1'){
            this.$message.error("只能选择一个考察小组组长")
            return false
          }else{
            if(this.form.id){
              this.form.employeeId = this.form.employee.key
              this.form.employeeName = this.form.employee.label
              this.form.employee = null
              editGroup(this.form).then((res)=>{
                if(res.code=='200'){
                  this.getGroup()
                  this.$message.success("编辑成功")
                }
              })
            }else{
              this.form.employeeId = this.form.employee.key
              this.form.employeeName = this.form.employee.label
              this.form.employee = null
              addGroup(this.form).then((res)=>{
                if(res.code=='200'){
                  this.getGroup()
                  this.$message.success("新增成功")
                }
              })
            }
          }
        }
      },
      handleCancel(){
        this.visible = false
      },
      handleAdd(){

      }
    }
  }
</script>

<style scoped>
  .input{
    width:100%
  }
  /deep/ .ant-table-pagination.ant-pagination{
    display:none
  }
</style>
